<template>
	<view class="onepopup">
		<u-popup 
			v-model="show"
			mode="center"
			border-radius="32"
			:width="width"
			:height="popHeight()"
			:custom-style="customStyle"
			@close="showPopup = false"
		>
			<view class="main" :class="addrPop ? 'addr_padd' : 'main_padd'">
				<template v-if="popType == 1">
					<view class="content">{{conetnt}}</view>
					<view class="btnArr">
						<view class="btn">
							<overbtn
								:btnText="cancelText"
								:fontSize="28"
								btnType="plain"
								@btnAction="cancel"
							></overbtn>
						</view>
						<view class="btn">
							<overbtn
								:btnText="confirmText"
								:fontSize="28"
								btnType="submit"
								@btnAction="confirm"
							></overbtn>
						</view>
					</view>
				</template>
				<template v-if="popType == 2">
					<view class="header" v-if="gtype == 2">Are you sure to leave？</view>
					<view class="header" v-else>This time, perhaps you will be the winner... Leave?</view>
					<!-- <view class="content">Are you sure to leave?</view> -->
					<view class="btnArr">
						<view class="btn">
							<overbtn
								:btnText="'Leave'"
								:fontSize="28"
								btnType="plain"
								@btnAction="back"
							></overbtn>
						</view>
						<view class="btn">
							<overbtn
								:btnText="'Continue'"
								:fontSize="28"
								btnType="submit"
								@btnAction="topay"
							></overbtn>
						</view>
					</view>
				</template>
				
				<template v-if="popType == 3">
					<view class="icon">
						<view class="icon_addr">
							<image src="../../static/image/goods/icon_MapPinLine.png" mode="" class="img"></image>
						</view>
						<view class="line">
							<image src="../../static/image/goods/img_Dividingline.png" mode="widthFix" class="img"></image>
						</view>
					</view>
					
					<view class="info" v-if="list.name">
						<view class="info_top">
							<text class="info_top_name">
								{{ list.name }}
							</text>
							<text class="info_top_phone">
								{{ list.mobile }}
							</text>
						</view>
						<view class="info_main">
							{{ list.address }}
						</view>
					</view>
					<view class="tips" v-else>
						{{ list.address }}
					</view>
					<view class="btnaddrArr">
						<view class="btn">
							<overbtn
								:btnText="cancelText"
								:fontSize="28"
								btnType="plain"
								@btnAction="addressEdit"
							></overbtn>
						</view>
						<view class="btn">
							<overbtn
								:btnText="confirmText"
								:fontSize="28"
								btnType="submit"
								@btnAction="btnConfirm"
							></overbtn>
						</view>
					</view>
				</template>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			// 弹窗类型 1通用弹窗 2支付挽留弹窗 3确认地址弹窗
			popType: {
				type: String,
				default: '1'
			},
			showPopup: {
				type: Boolean,
				default: false
			},
			width: {
				type: [Number, String],
				default: '552'
			},
			height: {
				type: [Number, String],
				default: '348'
			},
			conetnt: {
				type: String,
				default: 'content'
			},
			cancelText: {
				type: String,
				default: 'Cancel'
			},
			confirmText: {
				type: String,
				default: 'Confirm'
			},
			list: {
				type: Object,
				default: () => {
					return {}
				}
			},
			addrPop: {
				type: Boolean,
				default: false
			},
			gtype: {
				type: [String, Number],
				default: 1
			}
		},
		watch: {
			showPopup () {
				this.show = this.showPopup
			}
		},
		data() {
			return {
				show: false,
				customStyle: {
				},
			}
		},
		mounted() {
			this.$emit('poploading', true)
		},
		methods: {
			popHeight () {
				if (this.popType == 3) {
					return '-'
				} else {
					return this.height
				}
			},
			open () {
				this.show = true
			},
			close () {
				this.show = false
			},
			cancel () {
				this.$emit('cancel')
			},
			confirm () {
				this.$emit('confirm')
			},
			back () {
				// #ifdef H5
				let pages = getCurrentPages()
				if(pages.length == 1) {
					uni.navigateTo({
						url: '/pages/home/home'
					})
				} else {
					uni.navigateBack({})
				}
				// #endif
				
				// #ifndef H5
				uni.navigateBack({})
				// #endif
			},
			topay () {
				this.show = false
			},
			addressEdit () {
				this.$emit('addrEdit')			
			},
			btnConfirm() {
				this.$emit('confirmb')
			}
		}
	}
</script>

<style scoped lang="scss">
	.onepopup {
		.img {
			width: 100%;
			height: 100%;
		}
		.main_padd {
			padding: 56rpx 44rpx;
		}
		.addr_padd {
			padding: 11rpx 44rpx 40rpx 44rpx;
		}
		.main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 100%;
			background-color: #FFFFFF;
			.header {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				text-align: CENTER;
				color: #ee5016;
			}
			.content {
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				text-align: CENTER;
				color: #17273A;
			}
			.btnArr {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-top: 20rpx;
				.btn {
					width: 224rpx;
					height: 72rpx;
				}
			}
			.btnaddrArr {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-around;
				width: 100%;
				margin-top: 20rpx;
				.btn {
					width: 208rpx;
					height: 78rpx;
				}
			}
			.icon {
				width: 100%;
				text-align: center;
				display: flex;
				align-items: center;
				flex-direction: column;
				.icon_addr {
					width: 112rpx;
					height: 112rpx;
					min-height: 112rpx;
				}
			}
			.line {
				width: 115%;
			}
			.info {
				width: 100%;
				margin-top: 30rpx;
				margin-bottom: 22rpx;
				.info_top {
					.info_top_name {
						font-size: 32rpx;
						font-family: Roboto, Roboto-Medium;
						font-weight: bold;
						color: #17273a;
						line-height: 48rpx;
						margin-right: 16rpx;
					}
					.info_top_phone {
						font-size: 28rpx;
						font-family: Roboto, Roboto-Regular;
						font-weight: 400;
						color: #b9b9b9;
						line-height: 48rpx;
					}
				}
				.info_main {
					margin-top: 6rpx;
					font-size: 24rpx;
					font-family: Roboto, Roboto-Regular;
					font-weight: 400;
					color: #b9b9b9;
				}
			}
			.tips {
				margin-top: 10rpx;
				font-size: 28rpx;
				font-family: Roboto, Roboto-Regular;
				font-weight: 400;
				color: #17273a;
			}
		}
	}
</style>
